<template>
    <div class="check">
        <div class="title">我的审核</div>
        <div class="order-content">
            <label class="filterText">关键字</label>
            <el-input class="order-input-filter" placeholder="请输入姓名/身份证号/订单号" v-model="filter.text" icon="circle-cross" :on-icon-click="deleFilterText">
            </el-input>
            <label class="filterText">业务员</label>
            <el-input class="order-input-short" placeholder="请输入姓名" v-model="filter.salemanName"></el-input>
            <!-- <label class="filterText">业务部门</label>
            <el-cascader class="order-input-selemanName" placeholder="请选择部门" @active-item-change="handleItemChange" :props="props" :options="$store.state.opearDepart" v-model="filter.unit">
            </el-cascader> -->
            <label class="filterText">申请日期</label>
            <el-date-picker v-model="filter.time" type="daterange" placeholder="选择日期">
            </el-date-picker>
            <el-button class="filter-button-search" type="primary" icon="search" @click="search">搜索</el-button>
            <el-table v-show="$store.state.power == 'ROLE_COOPERATIVE'" class="order-table" :data="tableData" style="width: 100%" empty-text="暂无搜索结果" @filter-change="filterChange">
                <el-table-column prop="orderNo" label="订单编号" width="200">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="type" label="车型" width="180">
                </el-table-column>
                <el-table-column prop="unit" label="业务部门" width="100">
                </el-table-column>
                <el-table-column prop="staffName" label="业务员" width="100">
                </el-table-column>
                <el-table-column prop="bank" label="贷款银行" :filters="$store.state.bank" filter-placement="bottom-end" width="120">
                </el-table-column>
                <el-table-column prop="money" label="贷款金额" width="100">
                </el-table-column>
                <!-- <el-table-column prop="phone" label="审核员" width="130">
                </el-table-column> -->
                <el-table-column prop="time" label="申请时间" sortable min-width="180">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="80">
                    <template scope="scope">
                        <el-button type="text" size="small">
                            <router-link v-if="scope.row.applyType == 4" :to="{path:'/checkModify?orderNo='+scope.row.orderNo+'&bizChannel='+scope.row.bizChannel+'&applyType='+scope.row.applyType+'&taskId='+scope.row.taskId+'&flowNodeId='+scope.row.flowNodeId+'&applyId='+scope.row.applyId+'&customerIdCard='+scope.row.code+'&annexBatchNo='+scope.row.annexBatchNo}">审批</router-link>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-table v-show="$store.state.power != 'ROLE_COOPERATIVE'" class="order-table" :data="tableData" style="width: 100%" empty-text="暂无搜索结果" @filter-change="filterChange">
                <el-table-column prop="orderNo" label="订单编号" width="200">
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="100">
                </el-table-column>
                <el-table-column prop="type" label="车型" width="180">
                </el-table-column>
                <el-table-column prop="unit" label="业务部门" width="100">
                </el-table-column>
                <el-table-column prop="staffName" label="业务员" width="100">
                </el-table-column>
                <el-table-column prop="bank" label="贷款银行" :filters="$store.state.bank" filter-placement="bottom-end" width="120">
                </el-table-column>
                <el-table-column prop="money" label="贷款金额" width="100">
                </el-table-column>
                <!-- <el-table-column prop="phone" label="审核员" width="130">
                </el-table-column> -->
                <el-table-column prop="status" label="审批类型" :filters="$store.state.checkStatus" filter-placement="bottom-end" width="150">
                    <template scope="scope">
                        <el-tag type="primary">{{scope.row.status}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="申请时间" sortable min-width="180">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="80">
                    <template scope="scope">
                        <el-button type="text" size="small">
                            <router-link v-if="scope.row.applyType == 4" :to="{path:'/checkModify?orderNo='+scope.row.orderNo+'&bizChannel='+scope.row.bizChannel+'&applyType='+scope.row.applyType+'&taskId='+scope.row.taskId+'&flowNodeId='+scope.row.flowNodeId+'&applyId='+scope.row.applyId+'&customerIdCard='+scope.row.code+'&annexBatchNo='+scope.row.annexBatchNo}">审批</router-link>
                            <router-link v-else-if="(power=='ROLE_SALESMANAGER') && scope.row.applyType == 1" :to="{path:'/checkLoanManager?orderNo='+scope.row.orderNo+'&bizChannel='+scope.row.bizChannel+'&orderStatus='+scope.row.orderStatus+'&applyType='+scope.row.applyType+'&taskId='+scope.row.taskId+'&flowNodeId='+scope.row.flowNodeId+'&applyId='+scope.row.applyId+'&customerIdCard='+scope.row.code+'&annexBatchNo='+scope.row.annexBatchNo}">审批</router-link>
                            <router-link v-else-if="(power=='ROLE_AUDITOR' || power=='ROLE_AUDITORMANAGER' || power=='ROLE_RISKLEADER') && scope.row.applyType == 1" :to="{path:'/checkLoan?orderNo='+scope.row.orderNo + '&bizChannel='+scope.row.bizChannel+'&orderStatus='+scope.row.orderStatus+'&applyType='+scope.row.applyType+'&taskId='+scope.row.taskId+'&flowNodeId='+scope.row.flowNodeId+'&applyId='+scope.row.applyId+'&customerIdCard='+scope.row.code+'&annexBatchNo='+scope.row.annexBatchNo+'&needGps='+scope.row.needGps}">审批</router-link>
                            <router-link v-else-if="(power!='ROLE_AUDITOR') && scope.row.applyType == 3" :to="{path:'/checkException?orderNo='+scope.row.orderNo+'&customerId='+scope.row.customerId+'&bizChannel='+scope.row.bizChannel+'&orderStatus='+scope.row.orderStatus+'&applyType='+scope.row.applyType+'&taskId='+scope.row.taskId+'&flowNodeId='+scope.row.flowNodeId+'&applyId='+scope.row.applyId+'&customerIdCard='+scope.row.code+'&annexBatchNo='+scope.row.annexBatchNo+'&needGps='+scope.row.needGps}">审批</router-link>
                            <router-link v-else-if="(power=='ROLE_AUDITOR') && scope.row.applyType == 3" :to="{path:'/checkExceptionDetail?orderNo='+scope.row.orderNo+'&customerId='+scope.row.customerId+'&bizChannel='+scope.row.bizChannel+'&orderStatus='+scope.row.orderStatus+'&applyType='+scope.row.applyType+'&taskId='+scope.row.taskId+'&flowNodeId='+scope.row.flowNodeId+'&applyId='+scope.row.applyId+'&customerIdCard='+scope.row.code+'&annexBatchNo='+scope.row.annexBatchNo+'&needGps='+scope.row.needGps}">审批</router-link>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="order-pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="tablePage.page" :page-sizes="[10, 20, 30, 40]" :page-size="tablePage.num" layout="sizes, prev, pager, next" :page-count="tablePage.pager">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'check',
    components: {},
    data() {
        return {
            power: this.$store.state.power,
            filter: {
                time: [],
                text: '',
                bank: '',
                status: '',
                bankList: [],
                statusList: [],
                salemanName: '', //业务员名称
                unit: [],
                unitId: '',
                applyType: '',
                applyTypeList: []
            },
            props: {
                value: 'label',
                children: 'cities'
            },
            tableData: [],
            tablePage: {
                pager: 1, //总页数
                page: 1, //当前页数
                num: 10, //每页条数
            },
        }
    },
    methods: {
        handleItemChange(val) {
            let that = this;
            this.$store.commit('updataOpearDepart', {
                this: that,
                val: val
            });
        },
        filterChange(data) {
            for (let i in data) {
                switch (i) {
                    case 'status':
                        this.filter.applyType = data[i][data[i].length - 1];
                        this.filter.applyTypeList = data[i];
                        break;
                    case 'bank':
                        this.filter.bank = data[i][data[i].length - 1];
                        this.filter.bankList = data[i];
                        break;
                }
            }

            this.search();
        },
        info(index, rows) {
            console.log(rows);
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.tablePage.num = val;
            this.search();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.tablePage.page = val;
            this.search();
        },
        deleFilterText() {
            this.filter.text = '';
        },
        search() {
            console.log(this.filter.salemanName);
            if (this.filter.unit.length > 0) {
                for (var i = 0; i < this.$store.state.opearDepart.length; i++) {
                    let el = this.$store.state.opearDepart[i];
                    if (this.filter.unit[0] == el.label) {
                        for (var j = 0; j < el.cities.length; j++) {
                            if (el.cities[j].label == this.filter.unit[1]) {
                                this.filter.unitId = el.cities[j].id;
                            }
                        }
                    }
                }
            }
            let param = {
                gmtCreateBegin: this.filter.time[0] ? this.$libs.formatDate(this.filter.time[0], 'yyyy-MM-dd') : '',
                gmtCreateEnd: this.filter.time[1] ? this.$libs.formatDate(this.filter.time[1], 'yyyy-MM-dd') : '',
                keyword: this.filter.text,
                orderStatus: this.filter.statusList.length > 1 ? '' : this.filter.status,
                orderStatusList: this.filter.statusList.length > 1 ? this.filter.statusList.join('%2C') : '',
                loanBankId: this.filter.bankList.length > 1 ? '' : this.filter.bank,
                loanBankIdList: this.filter.bankList.length > 1 ? this.filter.bankList.join('%2C') : '',
                applyType: this.filter.applyTypeList.length > 1 ? '' : this.filter.applyType,
                applyTypeList: this.filter.applyTypeList.length > 1 ? this.filter.applyTypeList.join('%2C') : '',
                pageNO: this.tablePage.page,
                pageSize: this.tablePage.num,
                deptId: this.filter.unitId,
                staffName: this.filter.salemanName
            };

            if (this.$store.state.power == 'ROLE_COOPERATIVE') {
                param.orderStatus = 21;
                param.orderStatusList = '';
                param.applyType = 4;
            }
            this.tableData = [];
            this.$http.get(this.$libs.getUrlSplit("/audit/list", param)).then((response) => {
                console.log(response);
                if (response.data.success) {
                    console.log(response.data.result);
                    let that = this;
                    that.tablePage.pager = parseInt(response.data.totalPage);
                    that.tablePage.num = parseInt(response.data.pageSize);
                    console.log(that.tablePage);
                    this.tableData = [];
                    $.each(response.data.data, function(index, el) {
                        that.tableData.push({
                            name: el.customerName,
                            code: el.customerIdCard,
                            type: el.carModel,
                            unit: el.deptName,
                            staffName: el.staffName,
                            bank: el.loanBankName,
                            money: el.loanAmount,
                            phone: el.mobilePhone,
                            status: el.applyTypeDesc,
                            time: el.gmtCreate,
                            orderNo: el.orderNo,
                            annexBatchNo: el.annexBatchNo,
                            applyId: el.applyId,
                            customerId: el.customerId,
                            bizChannel: el.bizChannel,
                            orderStatus: el.orderStatus,
                            applyType: el.applyType,
                            taskId: el.taskId,
                            flowNodeId: el.flowNodeId,
                            needGps: el.needGps

                        });
                    });
                }
            }).catch((error) => {});

        },
    },
    mounted() {
        this.search();
        this.$store.commit('bank', this);
        this.$store.commit('orderStatus', this);
        this.$store.commit('opearDepart', this);
    }
}

</script>
<style lang="scss" scoped>
.check {
    padding: 10px 16px;

    .title {
        color: #99A9BF;
        font-size: 14px;
        line-height: 18px;
        margin: 8px 0px 10px 0px;
    }
    .order-content {
        background: #fff;
        padding: 20px;
        overflow: auto;
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        top: 45px;
        .filterText {
            font-size: 14px;
            color: #475669;
            margin: 0px 5px 0px 15px;
        }
        .order-hr {
            margin: 20px 0px 30px 0px;
            background: #D3DCE6;
        }
        .order-input-selemanName {
            width: 124px;
            margin-bottom: 10px;
            .order-input-name {
                width: 90px;
            }
        }
        .order-input-filter {
            width: 285px;
        }
        .filter-button-search {
            margin-left: 30px;
        }
        .order-table {
            margin: 20px 0px;
        }
        .order-pagination {
            text-align: center;
        }
        .order-input-short {
            width: 100px;
        }
        a {
            color: #20a0ff;
        }
    }
}

</style>
